<template>
  <el-dialog :title="title" v-model.visible="dialogVisible" width="1000px"
    class="correlationExperimentDialog dialog-vertical-center dialog-body-padding-top-bottom-0"
    :close-on-click-modal="false" :close-on-press-escape="false" @close="dialogClose" @closed="dialogClose">
    <el-table v-loading="tableLoading" :data="experimentData" border>
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column prop="name" label="实验名称">
        <template #default="scope">{{ scope.row.name
          }}
          <!-- <el-button link typsass-migratore="primary" @click="toDetailPage(scope.row.workflow_id, scope.row.id)">{{ scope.row.name
          }}</el-button> -->
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="status" label="运行状态" width="100">
        <template #default="scope">
          <el-tag :type="operatorRunState(scope.row.status)[0]" class="mx-1" effect="plain" round>
            {{ operatorRunState(scope.row.status)[1] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="version" label="工作流版本" width="120">
        <template #default="scope">
          <span>{{ 'V' + scope.row.version }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" />
      <el-table-column label="运行时长">
        <template #default="scope">{{ runTime(scope.row) }}</template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <pagination :total="experimentTotal" v-model.page="listQuery.page" v-model.limit="listQuery.page_size"
      @pagination="getExperimentData" />
    <template #footer>
      <div>
        <el-button @click="dialogClose()">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, nextTick } from "vue";
import { getRunWorkflows } from 'src/api/designerTool'
import { operatorRunState, secondToTime } from 'src/utils/designerTool/toole'
import { designerStore } from 'src/stores/designerTool/designerTool'
import { useRouter } from 'vue-router';
const router = useRouter()
const store = designerStore()
const dialogVisible = ref(true)
const title = ref('关联实验')
const rowId = ref('')
const tableLoading = ref(false)
const experimentData = ref([])
const experimentTotal = ref(0)
const listQuery = ref({ page: 1, page_size: 10 })
defineExpose({ init })
function init(row:any = {}) {
  rowId.value = row.id
  dialogVisible.value = true
  nextTick(() => {
    getExperimentData()
  })
}
const emits = defineEmits(['successFun', 'closeFun'])
function dialogClose() {
  emits('closeFun')
}
function getExperimentData() {
  tableLoading.value = true
  getRunWorkflows(store.project_id, rowId.value).then((res: any) => {
    experimentData.value = res.data.results
    tableLoading.value = false
  }).catch(error => {
    console.log(error)
    tableLoading.value = false
  })
}
function toDetailPage(workflowId: number, experiments: number) {
  let obj = {
    workflow_id: workflowId,
    id: experiments
  }
  store.EXOERIMENTS_ID(obj)
  router.push({ name: 'designer-tool-experiments', query: { project_id: store.project_id } })
}
const runTime=(row: any)=>{
  if (row.create_time != undefined) {
    let dateObj:any = {
      start_time: Date.parse(row.start_time) / 1000
    }
    if (row.finish_time != undefined) {
      dateObj.end_time = Date.parse(row.finish_time) / 1000
    }
    return secondToTime(dateObj)
  }
}
</script>
<style lang="scss" scoped></style>
